<template>
  <div>
    <div id="apply">
      <van-nav-bar title="" fixed safe-area-inset-top>
        <template #left>
          <img class="nav-img" src="https://files.onestep6.com/cloud/cloud_icon.png" alt="">
        </template>
      </van-nav-bar>

      <div class="time-tabs">
        <div class="time-left">
          <div :class="{ 'time-active': is_active == 0 }" @click="onActive(0)">{{ today }}订单</div>
          <div :class="{ 'time-active': is_active == 1 }" @click="onActive(1)">{{ nextday }}订单</div>
          <div :class="{ 'time-active': is_active == 2 }" @click="onActive(2)">全部订单</div>
        </div>
        <img v-if="is_admin == 1" class="time-right" src="https://files.onestep6.com/cloud/delivery-menu.png" alt="" @click="onGy" />
      </div>

      <div class="type">
        <div class="type-item" :class="{ 'type-c': is_type == 0 }" @click="onType(0)">全部</div>
        <div class="type-item" :class="{ 'type-c': is_type == 1 }" @click="onType(1)">
          待接单
          <div class="type-badge" v-if="order_count.dai_count > 0">{{ order_count.dai_count }}</div>
        </div>
        <div class="type-item" :class="{ 'type-c': is_type == 3 }" @click="onType(3)">
          配送中
          <div class="type-badge" v-if="order_count.peisong_count > 0">{{ order_count.peisong_count }}</div>
        </div>
        <div class="type-item" :class="{ 'type-c': is_type == 2 }" @click="onType(2)">
          待发货
        </div>
        <div class="type-item" :class="{ 'type-c': is_type == 4 }" @click="onType(4)">
          已完成
          <!-- <div class="type-badge" v-if="order_count.end_count > 0">{{ order_count.end_count }}</div> -->
        </div>
      </div>


      <div class="list-bottom" v-if="list.length != 0">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <div class="content" v-for="(item, index) in list" :key="index" @click="onDetail(item)">
            <div class="conetnt-title">
              <div class="title-flex">
                <img class="title-img" src="https://files.onestep6.com/cloud/order-icon.png"  />
                <div class="title-txt">{{ item.user_shop_name }}</div>
              </div>
              <div class="title-type">
                <span v-if="item.status == 1" class="type-fk">待接单</span>
                <span v-if="item.status == 3" class="type-ps">配送中</span>
                <span v-if="item.status == 2">待发货</span>
                <span v-if="item.status == 4">已完成</span>
              </div>
            </div>
            <div class="content-info">
              <div class="info-flex flex-content" @click.stop="copy(item.address)">
                <span class="info-name">店铺地址</span>
                <span class="info-address">{{ item.address }}</span>
                <img class="info-icon" src="https://files.onestep6.com/cloud/order-copy.png"  />
              </div>
              <div class="info-flex">
                <span class="info-name">联系人名</span>
                <span class="info-address">{{ item.contact_user }}</span>
              </div>
              <div class="info-flex">
                <span class="info-name">联系电话</span>
                <a class="info-a" :href="`tel:+86${item.contact_phone}`" @click.stop="()=>{}">
                  <span class="info-address">{{ item.contact_phone }}</span>
                  <div class="info-iconBg">
                    <img class="info-phone" src="https://files.onestep6.com/cloud/delivery-phone.png"  />
                  </div>
                </a>
              </div>
            </div>
            <div class="content-order">
              <div class="order-scroll">
                <div class="scroll">
                  <div class="scroll-content">
                    <img class="scroll-img" v-for="(itemC, indexC) in item.goods" :key="indexC" :src="itemC.good_pics" />
                  </div>
                </div>
              </div>
              <div class="order-num">
                <span>共{{ item.goods_count }}件</span>
                <img class="num-icon" src="https://files.onestep6.com/cloud/order-right.png"  />
              </div>
            </div>
            <div class="content-time">
              <div class="time-txt" v-if="item.delivery_type == 2 && item.delivery_num && (item.status == 3 || item.status == 4)">快递单号：<span class="txt-col">{{ item.delivery_num }}</span></div>
              <div class="time-txt" v-else-if="item.delivery_type == 1">配送时间：<span class="txt-col">{{ item.delivery_time }}</span></div>
              <div v-else></div>

              <div class="time-price">
                <span>采购金额</span>
                <span class="price-iocn">¥</span>
                <span class="price-num">{{ item.price_arr.z_price }}</span>
                <span class="price-small">.{{ item.price_arr.x_price }}</span>
              </div>
            </div>
            <div class="content-bottom">
              <!-- <van-button class="bottom-btn btn-again">分享订单</van-button> -->
              <van-button v-if="item.status == 1" class="bottom-btn" @click.stop="getOrder(item, index)">立即接单</van-button>
              <van-button v-if="(item.status == 2 && delivery_type == 2) || (item.status == 2 && is_admin == 1)" class="bottom-btn" @click.stop="onShipment(item, index)">确认发货</van-button>
            </div>
          </div>
        </van-list>
      </div>

      <!-- 无数据的时候展示 -->
      <div class="no-data" v-if="list.length == 0">
        <img class="no-img" src="https://files.onestep6.com/cloud/cart-no.png"  />
        <div class="no-txt">暂无订单～</div>
      </div>


    </div>

    <!-- 底部悬浮的配送清淡按钮 -->
    <div class="logo-btn" @click="onInventory">
      <div>{{ today }}日配送清单</div>
      <img class="logo-img" src="https://files.onestep6.com/cloud/delivery-logo.png" alt="">
    </div>

    <tabbar :is_menu="is_admin == 1 ? true: false" />
    <channel-select ref="channelSelect" :formList="formList" @select="shopSelect" />
    <popup-logistics ref="popupLogistics" @right="onCode" />

  </div>
</template>
<script>
import { copyText } from "@/utils/index";
import tabbar from '@/components/tabbar.vue';
import channelSelect from '@/components/channelSelect.vue';
import moment from 'moment'
import { orderList, shopList, doOrder, orderCount, endOrder } from "@/api/cloud";
import popupLogistics from '@/components/popupLogistics.vue';
export default {
  components: {
    tabbar,
    channelSelect,
    popupLogistics
  },
  data() {
    return {
      is_active: 0,
      is_type: 0,
      formList: [],
      pages: 1,
      size: 10,
      list: [],
      loading: false,
      finished: false,
      today: '',
      today_p: '',
      nextday: '',
      nextday_p: '',
      is_admin: 0,
      shop_id: '',
      delivery_type: 1, // 供应商类型 1同城2物流',
      order_count: {
        dai_count: '',
        end_count: '',
        peisong_count: ''
      },
      code_id: '',
      code_index: ''
    }
  },
  activated() {
      console.log('activated')
      const is_home = localStorage.getItem('is_home')
      const is_type = localStorage.getItem('is_type')
      this.is_active = is_home || 0;
      this.is_type = is_type || 0;
      this.onLoad();
      this.orderCount();
      localStorage.removeItem('is_home')
      localStorage.removeItem('is_type')
  },
  deactivated() {
    console.log('deactivated')
    localStorage.setItem('is_home', this.is_active)
    localStorage.setItem('is_type', this.is_type)
  },
  mounted() {
    // 当天日期（格式：YYYY-MM-DD）
    const today = moment().format('MM-DD');
    this.today = today;
    const today_p = moment().format('YYYY-MM-DD');
    this.today_p = today_p;
    // 后一天（明天）日期
    const nextday = moment().add(1, 'days').format('MM-DD');
    this.nextday = nextday;
    const nextday_p = moment().add(1, 'days').format('YYYY-MM-DD');
    this.nextday_p = nextday_p;

    this.is_admin = localStorage.getItem('is_admin')
    this.delivery_type = localStorage.getItem('delivery_type')
    // this.onLoad();
    if (this.is_admin){
      this.shopList();
    }
    // this.orderCount();
  },
  methods: {
    async onLoad() {
      let params = {
        status: this.is_type,
        dates: '',
        pages: this.pages,
        size: this.size,
        shop_id: this.shop_id
      }
      if (this.is_active == 0) {
        params.dates = this.today_p;
      }
      if (this.is_active == 1) {
        params.dates = this.nextday_p;
      }
      if (this.is_active == 3) {
        params.dates = '';
      }
      const res = await orderList(params)
      if (res.status == 1) {
          console.log(res)
          this.list = this.list.concat(res.data.list);
          this.loading = false;
          if (this.list.length >= res.data.count) {
            this.finished = true;
          } else {
            this.pages++;
          }
      }
    },
    resetList() {
      this.list = [];
      this.pages = 1;
      this.finished = false;
      this.onLoad();
      this.orderCount();
      window.scrollTo({
        top: 0,
        behavior: "smooth" // 平滑滚动（可选）
      });
    },
    onActive(num) {
      if (this.is_active == num) {
        return false;
      }
      this.is_active = num;
      this.is_type = 0;
      this.resetList();
    },
    onType(num) {
      this.is_type = num;
      this.resetList();
    },
    onGy() {
      this.$refs.channelSelect.init();
    },
    onDetail(item) {
      this.$router.push({
        path: '/orderDetail',
        query: {
          id: item.id
        }
      })
    },
    // 获取所有供货商
    async shopList() {
      const res = await shopList({});
      if (res.status == 1) {
        console.log(res)
        res.data.shop_list.map((item)=>{
          item.name = item.realname;
        })
        this.formList =[ {id: 0, name: '全部'},...res.data.shop_list];
      }
    },
    // 订单总数 角标
    async orderCount() {
      let params = {
        dates: ''
      }
      if (this.is_active == 0) {
        params.dates = this.today_p;
      }
      if (this.is_active == 1) {
        params.dates = this.nextday_p;
      }
      if (this.is_active == 3) {
        params.dates = '';
      }
      const res = await orderCount(params);
      if(res.status == 1){
        console.log(res)
        this.order_count = res.data;
      }
    },
    shopSelect(obj) {
      console.log(obj)
      this.shop_id = obj.id;
      this.resetList();
    },
    async getOrder(item, index) {
      const res = await doOrder({
				id: item.id
			})
			if(res.status == 1) {
				this.$toast.success('接单成功');
        console.log(index)
        this.resetList()
        // this.$set(this.list[index], 'status', 2);
        // this.orderCount();
			}
    },
    onInventory() {
      this.$router.push('/inventory')
    },
    onShipment(item, index) {
      this.code_id = item.id;
      this.code_index = index;
      this.$refs.popupLogistics.show();
    },
    async onCode(data) {
      console.log(data);// logistics_code
      const res = await endOrder({
        id: this.code_id,
        delivery_num: data.logistics_code
      })
      if (res.status == 1) {
        this.$set(this.list[this.code_index], 'status', 3);
        this.$toast.success('单号填写成功');
      }
    },
    copy(num) {
        copyText(num);
    },
  },
}
</script>
<style lang="less" scoped>
div {
  box-sizing: border-box;
}

#apply {
  width: 100vw;
  min-height: 100vh;
  padding-top: calc(92px + 158px);
  background: #FAFAFA;

  ::v-deep .van-nav-bar .van-icon {
    color: #323233;
  }

  ::v-deep .van-notice-bar {
    z-index: 6;
  }

  ::v-deep .van-hairline--bottom::after {
    border: none;
  }
}

.nav-img {
  display: block;
  width: 139px;
  height: 34px;
}

.time-tabs {
  position: fixed;
  left: 0;
  top: 92px;
  z-index: 100;
  width: 100vw;
  height: 58px;
  display: flex;
  justify-content: space-between;
  background: #FFFFFF;

  .time-left {
    flex: 1;
    padding-left: 48px;
    padding-right: 94px;
    display: flex;
    justify-content: space-between;
    height: 58px;
    font-size: 28px;
    line-height: 28px;
    font-weight: 400;
    color: #798391;
  }

  .time-active {
    position: relative;
    font-weight: bold;
    color: #49CA6F;
  }

  .time-active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 6px;
    background: #49CA6F;
  }

  .time-right {
    display: block;
    width: 33px;
    height: 33px;
    margin: 0 38px;
  }
}

.type {
  position: fixed;
  left: 0;
  top: 150px;
  z-index: 100;
  background: #FAFAFA;
  display: flex;
  align-items: center;
  width: 100vw;
  height: 100px;
  padding-left: 24px;
  padding-right: 24px;
  .type-item {
    position: relative;
    width: 25%;
    height: 52px;
    font-size: 26px;
    line-height: 52px;
    font-weight: 400;
    color: #798391;
    text-align: center;
  }

  .type-c {
    font-weight: bold;
    color: #202630;
  }

  .type-badge {
    position: absolute;
    top: -5px;
    right: 20px;
    transform: translateX(20%);
    width: fit-content;
    padding: 0 6px;
    height: 24px;
    font-size: 20px;
    line-height: 24px;
    font-weight: 400;
    color: #FFFFFF;
    background: #FF4D4F;
    border-radius: 40px;
  }
}

.content {
  width: 702px;
  border-radius: 16px;
  padding: 34px 26px 32px 32px;
  background: #FFFFFF;
  margin: 0 auto 24px;

  .conetnt-title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 32px;

    .title-flex {
      display: flex;
      align-items: center;
    }

    .title-img {
      flex-shrink: 0;
      display: block;
      width: 36px;
      height: 36px;
      margin-right: 8px;
    }

    .title-txt {
      font-size: 32px;
      line-height: 36px;
      color: #141414;
      font-weight: bold;
    }

    .title-type {
      font-size: 24px;
      line-height: 36px;
      color: #798391;
      font-weight: 400;

      .type-ps {
        color: #49CA6F;
      }

      .type-fk {
        color: #FF0000;
      }
    }
  }

  .content-info{
    width: 646px;
    margin: 0 auto 26px;
    // padding-bottom: 10px;
    border-bottom: 2px solid #F5F5F6;
    .flex-content{
      width: fit-content;
    }
    .info-flex{
      display: flex;
      align-items: center;
      margin-bottom: 16px;
      .info-a{
        display: flex;
        align-items: center;
      }
      .info-name{
        flex-shrink: 0;
        font-size: 24px;
        line-height: 24px;
        font-weight: bold;
        color: #202630;
        margin-right: 14px;
      }
      .info-address{
        font-size: 24px;
        line-height: 24px;
        font-weight: 400;
        color: #474D57;
      }
      .info-icon{
        display: block;
        width: 24px;
        height: 24px;
        margin-left: 22px;
      }
      .info-iconBg{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 40px;
        height: 40px;
        background: #F5F5F6;
        border-radius: 8px;
        margin-left: 28px;
      }
      .info-phone{
        display: block;
        width: 24px;
        height: 24px;
      }

    }
  }

  .content-order {
    display: flex;
    align-items: center;
    margin-bottom: 40px;

    .order-scroll {
      width: 502px;
      height: 128px;

      .scroll {
        width: 502px;
        height: 128px;
        overflow-x: scroll;
        scrollbar-width: none; /* Firefox 隐藏滚动条 */
        -ms-overflow-style: none; /* IE 10+ 隐藏滚动条 */
      }
      .scroll::-webkit-scrollbar {
        display: none; /* Chrome、Safari、Edge 隐藏滚动条 */
      }
    }

    .scroll-content {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;

      .scroll-img {
        flex-shrink: 0;
        display: block;
        width: 128px;
        height: 128px;
        border-radius: 8px;
        margin-right: 24px;
      }
    }

    .order-num {
      flex: 1;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      font-size: 24px;
      line-height: 24px;
      color: #798391;
      font-weight: 400;

      .num-icon {
        flex-shrink: 0;
        display: block;
        width: 24px;
        height: 24px;
        margin-left: 2px;
      }
    }
  }

  .content-time {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;

    .time-txt {
      font-size: 20px;
      line-height: 22px;
      color: #798391;
      font-weight: 400;
      .txt-col{
        color: #49CA6F;
      }
    }

    .time-price {
      font-size: 24px;
      color: #141414;
      font-weight: bold;

      .price-iocn {
        margin-left: 4px;
        margin-right: 2px;
      }

      .price-num {
        font-size: 40px;
      }

      .price-small {
        font-size: 28px;
      }
    }
  }

  .content-bottom {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    .bottom-btn {
      flex-shrink: 0;
      // width: fit-content;
      // padding: 18px 26px 16px 28px;
      width: 128px;
      height: 56px;
      padding: 0;
      background: #49CA6F;
      border-radius: 39px;
      font-size: 24px;
      line-height: 24px;
      font-weight: 400;
      color: #FFFFFF;
      margin: 0;
    }

    .btn-again {
      background: #FFFFFF;
      border: 2px solid #49CA6F;
      color: #49CA6F;
      margin-right: 16px;
    }
  }
}

.logo-btn{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 128px;
  bottom: calc(128px + constant(safe-area-inset-bottom)); /* 兼容 iOS<11.2 */
  bottom: calc(128px + env(safe-area-inset-bottom)); /* 兼容iOS>= 11.2 */
  width: 702px;
  height: 96px;
  background: #49CA6F;
  border-radius: 64px;
  font-size: 32px;
  line-height: 96px;
  color: #FFFFFF;
  text-align: center;
  font-weight: bold;
  .logo-img{
    position: absolute;
    right: 102px;
    bottom: 20px;
    display: block;
    width: 127px;
    height: 127px;
  }
}
.list-bottom{
  padding-bottom: 200px;
  
}

.no-data{
	padding-top: 82px;
	.no-img{
		display: block;
		width: 222px;
		height: 222px;
		margin: 0 auto 20px;
	}
	.no-txt{
		font-size: 28px;
		line-height: 44px;
		color: #798391;
		text-align: center;
	}
}
</style>